<template>
	<div class="container">
		<div class="wrapper search-wrapper">
			<div class="head">
				<span>搜索学员</span>
			</div>
			<div class="from">
				<el-form ref="form" :model="form" label-width="150px" class="demo-dynamic">
					<el-form-item label="身份证号码" prop="idcard">
						<el-col :span="16">
							<el-input v-model="form.idcard" size="small"></el-input>
						</el-col>
					</el-form-item>
					<el-form-item label="海员证号(SIB)" prop="sib">
						<el-col :span="16">
							<el-input v-model="form.sib" size="small"></el-input>
						</el-col>
					</el-form-item>
					<el-form-item label="姓名" prop="name">
						<el-col :span="16">
							<el-input v-model="form.name" size="small"></el-input>
						</el-col>
					</el-form-item>

					<el-form-item label="姓名（英文）" prop="ename">
						<el-col :span="16">
							<el-input v-model="form.ename" size="small"></el-input>
						</el-col>
					</el-form-item>

					<el-form-item label="性别" prop="sex">
						<el-checkbox-group v-model="form.sex">
							<el-checkbox label="男"></el-checkbox>
							<el-checkbox label="女"></el-checkbox>
						</el-checkbox-group>
					</el-form-item>
					<el-form-item label="学历" prop="education">
						<el-select v-model="form.education" clearable size="small">
							<el-option label="中专" value="中专"></el-option>
							<el-option label="大专" value="大专"></el-option>
							<el-option label="本科及以上" value="本科及以上"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="出生日期">
						<el-col :span="11">
							<el-date-picker type="date" v-model="form.birth1" size="small"></el-date-picker>
						</el-col>
						<el-col calss="line" :span="2">至</el-col>
						<el-col :span="11">
							<el-date-picker type="date" v-model="form.birth2" size="small"></el-date-picker>
						</el-col>
					</el-form-item>
					<el-form-item label="职务" prop="zhiwu">
						<el-select v-model="form.zhiwu" size="small" filterable clearable>
							<el-option v-for="item in zhiwuList" :key="item.id" :label="item.name" :value="item.name"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="同职务海龄" prop="agework">
						<el-col :span="16">
							<el-input v-model="form.agework" size="small"></el-input>
						</el-col>
					</el-form-item>
					<el-form-item label="船东" prop="chuandong">
						<el-select v-model="form.chuandong" size="small" filterable clearable>
							<el-option v-for="item in chuandongList" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="代理公司" prop="daili">
						<el-select v-model="form.daili" size="small" filterable clearable>
							<el-option v-for="item in dailiList" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="个人" prop="self">
						<el-checkbox-group v-model="form.self">
							<el-checkbox label="是"></el-checkbox>
							<el-checkbox label="否"></el-checkbox>
						</el-checkbox-group>
					</el-form-item>
					<el-form-item label="船型" prop="crewtype">
						<el-select v-model="form.crewtype" size="small" filterable clearable>
							<el-option v-for="item in crewList" :key="item.id" :label="item.type" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="国籍" prop="country">
						<el-select v-model="form.country" size="small" filterable clearable>
							<el-option v-for="item in odata.country" :label="item[1]" :value="item[1]" :key="item[0]"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="户籍所在地" prop="province">
						<el-select v-model="form.province" size="small" filterable clearable>
							<el-option v-for="item in odata.province" :label="item.name" :value="item.name" :key="item.name"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="大证到期日" prop="duedate">
						<el-select v-model="form.duedate" size="small">
							<el-option label="12个月" value="12"></el-option>
							<el-option label="18个月" value="18"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="培训次数" prop="times">
						<el-col :span="16">
							<el-input v-model="form.times" size="small"></el-input>
						</el-col>
					</el-form-item>
					<el-form-item label="电话" prop="tel">
						<el-col :span="16">
							<el-input v-model="form.tel" size="small"></el-input>
						</el-col>
					</el-form-item>
					<el-form-item label="邮箱" prop="email">
						<el-col :span="16">
							<el-input v-model="form.email" size="small"></el-input>
						</el-col>
					</el-form-item>
					<el-form-item label="是否有沟通" prop="talk">
						<el-checkbox-group v-model="form.talk">
							<el-checkbox label="是"></el-checkbox>
							<el-checkbox label="否"></el-checkbox>
						</el-checkbox-group>
					</el-form-item>
					<el-form-item label="意向课程" prop="intent">
						<el-select v-model="form.intent" size="small" filterable clearable>
							<el-option v-for="item in courseList" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<div class="button-wrapper">
						<el-button type="primary" @click="onSubmit('form')">提交</el-button>
						<el-button @click="resetForm('form')">重置</el-button>
					</div>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
	import odata from '../../assets/js/data.js'
	export default {
		data() {
			return {
				odata: odata,
				form: {
					idcard: '',
					sib: '',
					name: '',
					ename: '',
					sex: [],
					education: '',
					birth1: '',
					birth2: '',
					zhiwu: '',
					agework: '',
					chuandong: '',
					daili: '',
					self: [],
					crewtype: '',
					country: '',
					province: '',
					duedate: '',
					times: '',
					tel: '',
					email: '',
					talk: [],
					intent: ''
				},
				zhiwuList: [],
				chuandongList: [],
				dailiList: [],
				courseList: [],
				crewList: []
			}
		},

		created() {
			Lockr.rm('traineeSearch')
			this.getZhiwuList()
			this.getChuandongList()
			this.getDailiList()
			this.getCourseList()
			this.getCrewList()
		},

		methods: {
			getZhiwuList() {
				this.apiPost('System/zhiwuLists').then(res => {
					this.zhiwuList = res
				})
			},
			getChuandongList() {
				this.apiPost('System/chuandongLists').then(res => {
					this.chuandongList = res
				})
			},
			getDailiList() {
				this.apiPost('System/dailiLists').then(res => {
					this.dailiList = res
				})
			},
			getCourseList() {
				this.apiPost('System/courseLists').then(res => {
					this.courseList = res
				})
			},
			getCrewList() {
				this.apiPost('System/crewLists').then(res => {
					this.crewList = res
				})
			},
			onSubmit(formName) {
				Lockr.set('traineeSearch', this.form)
				router.push('/trainee/list')
			},

			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
		}
	}
</script>

<style scoped>
	.container {
		box-sizing: border-box;
		width: 100%;
		background: #FFFFFF;
	}

	.wrapper {
		margin: 0 auto;
		padding-top: 20px;
		padding-bottom: 10px;
		width: 600px;
	}

	.wrapper .head {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 36px;
		background: rgba(1, 119, 191, 0.6);
	}

	.wrapper .head span {
		font-size: 14px;
		font-family: MicrosoftYaHei;
		color: rgba(255, 255, 255, 1);
	}

	.wrapper .from {
		padding: 10px 0;
		border: 1px solid rgba(1, 119, 191, 0.6);
	}

	.button-wrapper {
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 10px;
		border-top: 1px solid rgba(1, 119, 191, 0.6);
		box-sizing: border-box;
	}
</style>
